<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.city') }}</h2>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="4">
          <el-input v-model="query.name" type="text" :placeholder="$t('table.ForeignLanguageName')" />
        </el-col>
        <el-col :span="4">
          <el-select v-model.number="query.status" :placeholder="$t('table.selectThe')+$t('table.state')">
            <el-option v-for="(item,index) in statusData" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="650px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column label="简称" prop="name" />
        <el-table-column label="全称" prop="fullname" />
        <el-table-column label="纬度" prop="latitude" width="120" />
        <el-table-column label="经度" prop="longitude" width="120" />
        <el-table-column :label="$t('table.state')" prop="is_kai" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.is_kai|statusFilter">
              {{ row.is_kai|formStatusData }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="320" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="warning" size="mini" :disabled="!checkPermission('city-kai')" @click="addOrEidt(row.id)">开启</el-button>
            <el-button icon="el-icon-delete" type="danger" size="mini" :disabled="!checkPermission('city-guan')" @click="delData(row.id)">关闭</el-button>
            <el-button v-if="row.is_kai==1" icon="el-icon-setting" type="primary" size="mini" :disabled="!checkPermission('city-sub-guan')" @click="subordinate(row)">下级城市管理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 下级城市管理 -->
    <el-dialog title="下级城市管理" :visible="showDialog" @close="btnCanle">
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="(item,index) in cityList" :key="index" :label="item.cid" style="margin: 10px 10px;">{{ item.fullname }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="RegionOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCityList, addCity, CityEdit } from '@/api/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      downloadLoading: false,
      statusData: [{
        id: 1,
        value: this.$t('table.normal')
      },
      {
        id: 2,
        value: this.$t('table.deactivate')
      }],
      query: {
        name: '',
        aid: 0,
        status: undefined,
        page: 1,
        limit: 10
      },
      query1: {
        aid: 0,
        page: 1,
        limit: 1000
      },
      count: 0,
      showDialog: false,
      cityList: [],
      checkList: [],
      cur: undefined
    }
  },
  created() {
    // 获取userid
    this.getBusinessCateList()
  },
  methods: {
    // 确定区域选择
    async RegionOk() {
      const NewArr = []
      this.checkList.forEach(element => {
        this.cityList.forEach(item => {
          if (element === item.cid) {
            NewArr.push(item.id)
            return
          }
        })
      })
      const one = {
        pid: this.cur,
        ids: NewArr
      }
      try {
        await this.$confirm('确定要修改这些城市状态吗？')
        await CityEdit(one)
        this.$message.success('设置成功！')
      } catch (error) {
        this.$message.error(error)
      }
      this.btnCanle()
    },
    // 打开下级省份
    async subordinate(row) {
      this.checkList = []
      this.cur = row.cid / 1000
      this.query1.aid = row.cid / 1000
      const { list } = await getCityList(this.query1)
      this.cityList = list
      this.cityList.forEach(item => {
        if (item.is_kai === 1) {
          this.checkList.push(item.cid)
        }
      })
      this.showDialog = true
    },
    // 获取省份列表
    async getBusinessCateList() {
      this.downloadLoading = true
      const { count, list } = await getCityList(this.query)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 开启该省份
    async addOrEidt(e) {
      const data = {
        id: e,
        is_kai: 1
      }
      try {
        await this.$confirm('确定要开启该省份吗？')
        await addCity(data)
        this.getBusinessCateList()
        this.$message.success('开启成功！')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 关闭该省份
    async delData(e) {
      const data = {
        id: e,
        is_kai: 2
      }
      try {
        await this.$confirm('确定要关闭该省份吗？')
        await addCity(data)
        this.getBusinessCateList()
        this.$message.success('关闭成功！')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getBusinessCateList()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getBusinessCateList()
    },
    // 取消区域选择
    btnCanle() {
      this.checkList = []
      this.cityList = []
      this.showDialog = false
    }
  }
})
</script>
<style lang="scss">
.table-img{
  width: 90px;
}
</style>
